<template>
    <div class="background">
        <div style="margin: 16px 0 0 16px">
            <div class="butbox">
                <span class="a-button">标题:<a-input ipt v-model="text" class="search"></a-input></span>
                <a-button type="primary" class="a-button" @click="search">
                    <a-icon type="search" />
                    搜索
                </a-button>
                <a-button class="a-button" @click="reload1">
                    <a-icon type="reload" />
                    重置
                </a-button>
                <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
                    展开 <a-icon :type="expand ? 'up' : 'down'" />
                </a>
            </div>
            <div>
                <a-button type="primary" @click="showDrawer" class="a-button">
                    <a-icon type="plus" />
                    新增
                </a-button>
                <a-modal title="Title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
                    @cancel="handleCancel" class="title">
                    <div class="titlebox">
                        <a-form v-model="newform">
                            <div class="txtbox">角色名称<a-input v-model="newform.roleName" class="titletxt"></a-input></div>
                            <div class="txtbox">角色编码<a-input v-model="newform.roleCode" class="titletxt"
                                    :disabled="disa"></a-input></div>
                            <div class="txtbox">描述<a-textarea v-model="newform.description" class="titletxt"
                                    placeholder="Autosize height based on content lines" :auto-size="{ minRows: 5 }" />
                            </div>
                        </a-form>
                    </div>
                </a-modal>

                <a-button type="primary" class="a-button">
                    <a-icon type="upload" />
                    导出
                </a-button>
                <a-button type="primary" class="a-button">
                    <a-icon type="export" />
                    导入
                </a-button>
                <a-button type="primary" class="a-button">
                    <a-icon type="hdd" />
                    回收站
                </a-button>
            </div>
            <div>
            </div>
            <span style="margin-left: 8px">
                <template>
                    <!-- {{ `Selected ${selectedRowKeys.length} items` }} -->
                    <a-table :data-source="data1" bordered class="a-button"
                        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">

                        <!-- <span slot="title" style="color: #1890ff">名字</span> -->

                        <a-table-column key="titile" title="标题" data-index="titile" />
                        <a-table-column key="msgCategory_dictText" title="消息类型" data-index="msgCategory_dictText" />
                        <a-table-column key="updateBy" title="发布人" data-index="updateBy" />
                        <a-table-column key="priority_dictText" title="优先级" data-index="priority_dictText" />
                        <a-table-column key="msgType_dictText" title="通告对象" data-index="msgType_dictText" />
                        <a-table-column key="sendStatus_dictText" title="发布状态" data-index="sendStatus_dictText" />
                        <a-table-column key="sendTime" title="发布时间" data-index="sendTime" />
                        <a-table-column key="cancelTime" title="撤销时间" data-index="cancelTime" />

                        <a-table-column key="action" title="操作" style="width:150 " data-index="action" fixed="right">


                            <template slot-scope="text, record">
                                <span>
                                    <a @click="edit(record)">编辑 {{ record.firstName }}</a>
                                    <a-divider type="vertical" />
                                    <!-- <a key="id" @click="del(record.id)">删除</a> -->
                                    <template>
                                        <a-popconfirm key="id" title="确定要删除这个角色?" ok-text="确认" cancel-text="取消"
                                            @confirm="del(record.id)" @cancel="cancel">
                                            <a href="#">删除</a>
                                        </a-popconfirm>
                                    </template>
                                </span>
                            </template>
                        </a-table-column>
                    </a-table>
                </template>
            </span>
        </div>
        <!-- <a-table bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
          :data-source="data" /> -->
    </div>
</template>
<script>
import { getann, newRole, editRole } from "@/api/login";
import { delRole } from "@/api/login"
// import router from "@/router";
import { Input } from "antd";
const ipt = () => <Input placeholder="Basic usage" />;

export default {
    name: "AnnountView",
    data() {
        return {
            ipt,
            disa: false,
            expand: false,
            show: false,
            startValue: null,
            endValue: null,
            endOpen: false,
            text: "",
            newform: [],
            data1: [],
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            visible: false,
        };
    },
    watch: {
        startValue(val) {
            console.log('startValue', val);
        },
        endValue(val) {
            console.log('endValue', val);
        },
    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
    created() {
        this.getannform()
    },
    methods: {
        edit(row) {
            this.visible = true
            this.newform = row
            this.disa = true
        },
        toggle() {
            this.expand = !this.expand
        },
        async del(id1) {
            const p = {
                id: id1
            }
            await delRole(p)
            this.getannform()
        },
        async search() {
            const p = {
                _t: JSON.stringify(Date.now()).substring(0, 10),
                titile: this.text,
                column: 'createTime',
                order: 'desc',
                field: 'id,,,titile,msgCategory,sender,priority,msgType,sendStatus,sendTime,cancelTime,action',
                pageNo: 1,
                pageSize: 10,
            }
            const res = await getann(p)
            if (res.status === 500) {
                localStorage.removeItem("token")
                window.open("/login")
                console.log("错误")
            }
            console.log(res)
            this.data1 = res.result.records
        },
        showDrawer() {
            this.visible = true;
        },
        handleCancel() {
            this.visible = false;
            this.newform = []
            this.disa = false
        },
        handleOk() {
            const p = {
                description: this.newform.description,
                roleCode: this.newform.roleCode,
                roleName: this.newform.roleName
            }
            if (this.disa) {
                editRole(this.newform)
                this.disa = false
            } else {
                newRole(p)
            }
            this.getannform()
            this.newform = []
            this.visible = false;
        },
        handleButtonClick(e) {
            console.log(e)
        },
        handleMenuClick(e) {
            console.log(e)
        },
        start() {
            this.loading = true;
            // ajax request after empty completing
            setTimeout(() => {
                this.loading = false;
                this.selectedRowKeys = [];
            }, 1000);
        },
        onDelete(key) {
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.filter(item => item.key !== key);
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        async getannform() {
            const p = {
                _t: JSON.stringify(Date.now()).substring(0, 10),
                column: 'createTime',
                order: 'desc',
                field: 'id,,,roleName,roleCode,description,createTime,updateTime,action',
                pageNo: 1,
                pageSize: 10,
            }
            const res = await getann(p)
            this.data1 = res.result.records
            console.log("01", res)
            console.log("02", this.data1)
        },
        reload1() {
            this.text = "",
            this.getannform()
        }
    },
};
</script>
<style>
.txtbox {
    margin: 0 auto;
}

.ant-modal-body {
    padding: 0px;
}

.ant-modal-content {
    width: 800px;
}

.titletxt {
    width: 722.99px;
    margin-top: 25px;
}

.titlebox {
    width: 100%;
    padding: 24px;
    height: 200px;
    overflow-y: auto;
}

.input {
    width: 423.99px;
}

.butbox {
    width: 100%;
    padding: 10px;
    border: 10px;
}

.newform {
    padding: 20px 40px;
}

.a-button {
    margin-left: 10px;
}

.search {
    width: 243.45px;
    margin-bottom: 10px;

}

.dropdown {
    width: 279.5px;
}

.background {
    background-color: #fff;
    margin: 4px 4px 0px;
}
</style>